<template>
  <div class="oe-exam-manage" v-loading="loading">
    <div class="oe-exam-content">
      <div id="pdfDom" class="oe-exam-container" style="width: 1200px;padding: 20px;">
        <h2 class="">监考报告</h2>
        <table border="2px;">
          <tr>
            <td><b>考试名称：</b></td>
            <td>{{ title }}</td>
            <td><b>考试时间：</b></td>
            <td>{{ time }}</td>
            <td><b>监考人：</b></td>
            <td>{{ displayName }}</td>
          </tr>
          <tr>
            <td><b>应到人数：</b></td>
            <td>{{ stuCount }}人</td>
            <td><b>实到人数：</b></td>
            <td>{{ submitCount }}人</td>
            <td><b>缺考人数：</b></td>
            <td>{{ noSubmitCount }}人</td>
          </tr>
          <tr class="allStudent">
            <td><b>实到考生：</b></td>
            <td colspan="5">
              <div style="text-align: left;">{{ names }}</div>
            </td>
          </tr>
          <tr class="allStudent">
            <td><b>缺考考生：</b></td>
            <td colspan="5"><div>{{ noSubNames }}</div></td>
          </tr>
          <tr class="situation">
            <td>
              <b>监考情况：</b>
              <div v-if="isShowPdf">字数({{remarkContent.length}}/1200)</div>
            </td>
            <td colspan="5">
              <textarea v-if="isShowPdf" class="remarkContent" v-model="remarkContent" maxLength="1200"></textarea>
              <div v-else class="remarkContent" v-html="remarkContent"></div>
            </td>
          </tr>
        </table>
      </div>
      
    </div>
    <div class="option_btn">
      <a-button type="primary" @click="saveInfo" v-if="isMonitorTea">保存</a-button>
      <a-button type="primary" @click="onGetPdf">导出</a-button>
    </div>
  </div>
</template>

<script>
import GetOperationList from '@/lib/mixin/methods.js';
export default {
  name: 'examManage',
  mixins: [GetOperationList],
  data() {
    return {
      title: '',
      time: '',
      displayName: '',
      stuCount: 0,
      submitCount: 0,
      noSubmitCount: 0,
      names: '',
      remarkContent: '',
      isShowPdf: true,
      isMonitorTea: false,
      loading: false,
      noSubNames: ''
    };
  },
  props:{
    examid:{
      type:String,
      default:''
    },
    paperType:{
      type:Number,
      default:0
    }
  },
  mounted(){
    this.getInfo();
  },
  methods: {
    // 获取页面信息
    getInfo() {
      this.loading = true;
      this.$http
        .post('/api/examMonitor/Report/getReportInfo', {
          examId: this.examid,
          examType: this.paperType
        })
        .then((rst) => {
          this.loading = false;
          if (rst.code > 0) {
            this.title = rst.title;
            this.time = rst.time;
            this.displayName = rst.displayName;
            this.stuCount = rst.stuCount;
            this.submitCount = rst.submitCount;
            this.noSubmitCount = rst.noSubmitCount;
            this.names = rst.names;
            this.remarkContent = rst.remark;
            this.isMonitorTea = rst.isMonitorTea;
            this.noSubNames = rst.noSubNames;
          } else {
            this.$message.error(rst.msg);
          }
        });
    },
    onGetPdf() {
      window.scrollTo(0, 0);
      window.pageYOffset = 0;
      document.documentElement.scrollTop = 0
      document.body.scrollTop = 0;
      this.isShowPdf = false;
      setTimeout(() => {
        this.getPdf(this.title + '监考报告');
        this.isShowPdf = true;
      }, 500);
    },
    saveInfo() {
      this.loading = true;
      this.$http
        .post('/api/examMonitor/Report/saveRemark', {
          examId: this.examid,
          examType: this.paperType,
          remark: this.remarkContent
        })
        .then((rst) => {
          this.loading = false;
          this.$message.success(rst.msg);
        });
    }
  }
};
</script>
